<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
	<title>i到位年会评分系统输入</title>
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
	<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
	<script src="./js/jquery.qrcode.min.js"></script>
	<style>
		*{
			margin:0;
			padding:0;
		}
		html,body{
			height:100%;
			background-color: #eee;
		}
		body{	
			padding:100px 0;
		}
		.item{
			width:80%;
			margin:20px auto;
		}
		#box{
			text-align: center;
		}
	</style>
</head>
<body>
	<div id="control" align="center">
		<div class="jumbotron">
		  <h1>欢迎使用i到位评分系统</h1>
		  <p>
		  	现在让我们首先来设置您的分组信息吧<br/>
			请在下面的输入框内输入您要的队伍信息，以换行为一组，输入完成点击确定
		  </p>
		  <p>
		  	<textarea style="width:40%;margin:0 auto;height:100px;" name="" id="groups" class="form-control"></textarea>
		  </p>
		  <p><a class="btn btn-primary btn-lg" onclick="setGroup();" role="button">确定</a></p>
		</div>
	</div>
	<div id="box"></div>
	<script type="text/javascript">
		function createGroup(arr) {
			var html = "";
			for(var i=0;i<arr.length;i++){
				html += '<div class="item"><div class="input-group"><input type="text" class="form-control" id="int'+(i+1)+'" placeholder="'+arr[i]+'">';
			    html += '<span class="input-group-btn">';
			    html += '<button class="btn btn-primary" type="button" onclick="add('+(i+1)+');">加分</button>';
			    html += '</span></div></div>'
			}

			html += '<div align="center"><button class="btn btn-primary" type="button" onclick="reset();">重置</button></div>'
			$("#box").html(html);
		}

		var bundle = {
			"action" : "",
			"type" : "manager",
			"content" : ""
		};
		function fire(bundle){
			bundle.type = "manager";
			ws.send(JSON.stringify(bundle));
		}
		//连接服务器
		var ws = new WebSocket("ws://"+window.location.hostname+":8003");
		//连接成功触发
		ws.onopen = function(){
			alert("连接成功");
			bundle.action = "connect";
			fire(bundle);
		}
		//连接失败触发
		ws.onerror = function(){
			alert("连接失败");
		}
		function setGroup() {
			if($("#groups").val()){
				var arr = $("#groups").val().replace(/[\r\n]/g, ",").split(",");
				var action = {
					type:"setGroup",
					data:arr
				}
				
				bundle.action = "chat";
				bundle.content = action;
				fire(bundle);

				$("#box").qrcode({
				    width: 300, //宽度
				    height:300, //高度
				    text: "http://"+window.location.hostname+"/server.html" //任意内容
				});
				$("#box").append("<div>手机访问请在同一个局域网下扫码</div>");
				$("#box").append("<div>电脑请点击 <a href='"+"http://"+window.location.hostname+"/server.html"+"' target='_blank'>跳转</a></div>");
				$("#control").hide();
			}
		}
	</script>
</body>
</html>